Pizcos me hablaba el otro día de TJPzoom es un fantástico script que permite hacer zoom sobre las imágenes produciendo un efecto lupa de un aumento considerable.
Intenté añadirlo siguiendo los pasos de las páginas que he encontrado en la red consiguiendo el efecto lupa en la imagen, pero sin conseguir hacer funcionar el efecto para acercar y alejar el zoom.
Después de mucho intentarlo al fin he podido aplicar este efecto en Blogger.
Ingresamos en nuestra plantilla Edición de HTML, localizamos </head> y justo antes añadimos lo siguiente:
<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido del script
//]]>
</script>
El contenido del script podemos copiarlo desde aquí tjpzoom.js
Para aumentar la imagen pulsa el botón izquierdo del ratón y arrástralo hacia arriba, para minimizar pulsa botón izquierdo y arrastra hacia abajo.
Compatible con los siguientes navegadores:
-Internet Explorer 6, 7
-Firefox 2
-Opera (probado en versión 8.54)
-Safari 2
-Konqueror 3.5.6
<script type='text/javascript'>
//<![CDATA[
Aquí añadimos el contenido del script
//]]>
</script>
El contenido del script podemos copiarlo desde aquí tjpzoom.js
Una vez añadido guardamos los cambios y nos dirigimos a nuestro editor de entradas si es que deseamos añadir el efecto en una entrada, o editamos un nuevo gadget de HTML si deseamos mostrarlo en un gadget. La imagen la mostraremos añadiendo:
<div style="height:300px;">
<div style="position:absolute;">
<img src="url-de-la-imagen" onmouseover="TJPzoom(this);"
style="border:0;padding:0;"/>
</div>
</div>
-Internet Explorer 6, 7
-Firefox 2
-Opera (probado en versión 8.54)
-Safari 2
-Konqueror 3.5.6
Hola Gema!
Maravillada por toda la información que nos brindás! Cuando puedas, pasate por mi blog, hay algo que quiero regalarte.
Saludos!
Muchas gracias por el detalle Marichu ;)
He llegado a tu blog y me he quedado tiempo mirando todo lo que ensenas,soy "primeriza" y llegue a el buscando la manera de cambiar plantillas,lo consegui,gracias a tu ayuda,pero cdo puse la imagen de fondo,pues mi blog se convirtio en una sola columna,y me gustaria que me ayudaras a hacerlo de dos columnas sin cambiar el fondo,aun lo tengo privado,porque quiero abrirlo cdo me guste de verdad,me puedes ayudar?
CoRaZoN_ToCaO elimina la imagen de fondo para dejar la plantilla tal y como estaba, luego dime qué plantilla estás usando y añadimos la imagen de fondo intentando que cada cosa quede en su lugar ;)
Ains no se,me imagino que la que aparece alli cdo haces el blog,solo anadi todo lo que explicaste para poner la imagen de fondo,y tb use lo que explicaste para encuadrar las cosas,que lio!,pero de que aprendo lo hare,con tu ayuda claro,tb te enlace a mi pagina,he mirado por todas partes y nadie como tu para aprender,muchas gracias por todo y espero tu respuesta a ver si acabo de abrir esto....
Ahora perdi la imagen de fondo,no me sale,y quedo el blog blanco,ainss,mejor lo dejo para manana ,porque ya no pienso,muchas gracias por todo Gema,manana paso por aca a ver si me das alguna idea y puedo recuperarlo,hasta manana!
Debo ver tu blog para poder ayudarte CoRaZoN_ToCaO no sé que plantilla usas ni la solución que podemos darle a no ser que instales una plantilla de nuevo (si lo haces fíjate como se llama la plantilla, si te sirve de ayuda la plantilla Minima es una de las que más juego da a la hora de ser modificada)
Pues abro las puertas para que me ayudes Gema,lo hago ahora mismo,pero anoche mirando pude ponerlo como estaba,hoy he puesto algunas cosas que encontre aqui,y creo que es plantilla clasica,pero de todas formas,ya veras,cdo quieras puedes llegarte,y mil gracias de antemano,saludos...
No se por que me quedan tan juntas las dos columnas,he buscado a ver si tienes respuestas,pero aun no la encuentro.Y disculpame.
En efecto es la plantilla Minima.
Puedes dar separación a las dos columnas ensanchando la totalidad del blog, por ejemplo: Busca las medidas que voy a indicarte de width:660px; para sustituirlas por width:760px;
Esas medidas las encontrarás en:
#header-wrapper {
width:660px;
#outer-wrapper {
width: 660px;
#footer {
width:660px;
Mira en vista previa antes de guardar los cambios ;)
Muchas gracias Gema,ya lo hice y me gusto como quedo,eres un amor,SALUDOSSS y mil gracias...
Estupendo ;)
Hola Gem@:
He intentado colocar el código tal como lo indicas, pero me marca error:
"The element type "script" must be terminated by the matching end-tag "". "
Me fui a la page de este chico y vi que es exactamente el mismo que tienes tú, entonces no capto de dónde surge el error.
¿Puedes ayudarme una vez más por favor hermosa?
Gracias
Troy
Saludos Troy, me alegra verte de nuevo ;)
Intenta sustituyendo en el script las comillas dobles (´´)por simples (')creo que ese es el error que te marca.
Si no fuera eso házmelo saber para que intentemos solucionarlo ;)
Holas Gem@;
Parece que no recibiste mi anterior comentario. Te decía que no funcionó al cambiar las comillas dobles por las siemples, aún cuando traté con varias combinaciones de línes sencillas y dobles.
Incluso probé por si habíe error en el lugar dónde coloacrlas, tanto dentro como fuera de head. La cosa sigue igual. No se si se debe a que mi plantilla es una MINIMA modificada a 3 columnas.
Espero a ver qué me dices.
Gracias anticipadas, como siempre.
Troy
PD: Por cierto, te había enviado un mail que le hice llegar también a Rosita, del Escaparate y a Vane de La Bloguería. ¿Lo leiste?
Hola Troy, no, no he visto el comentario que mencionas, así como tampoco me ha llegado el mail que me dices :( :( :( lo he buscado en la carpeta spam y tampoco lo veo. Si lo envías otra vez estaré pendiente.
Por otra parte intenta a añadir el script justo antes de </body> (al final del todo) a veces suele funcionar cuando un script no se ejecuta.
Gem@:
Creo que mi comentario no apareció porque puse algo en código y al parecer me fue rechazado y no me di cuenta. Veré de hacer lo que me indicas.
Te comentaré lo que suceda.
Te acabo de reenviar el mail que meciono.
Espero te agrade! Es algo super simple, no esperes demasiado de mí :)
Troy.
Gem@:
Nop. Tampoco sirvió asi en el body. El mensaje de error es exactamente el mismo.
Lo lamento. No se la causa de que no funcione. Lo dejo así.
:-(
Troy
Hola Gem@, Este post me parece genial así como el post de Lytebox, que lo vi en el blog de J.Muir. Me acabo de quedar colgado en tu blog y probare este efecto.
Se puede variar el tamaño del cuadro de la lupa!, veré en el scrip imagino que si.
Muchas gracias por estos post y te visitare seguido.
Troy ¿por qué no lo intentas en algún blog de pruebas? así sabemos si es el script o algo de la plantilla.
Hola Claudio bienvenido :)
Me alegra que te quedes colgado eso quiere decir que no está del todo mal .
Sobre modificar el tamaño de la lupa, no he probado pero creo que estás en lo cierto ;)
gema el script ya no sirve no funciona de nincuna manera
yz Admin yo lo veo funcionando perfectamente en los ejemplos de esta misma entrada.
Y el script sigue online:
http://valid.tjp.hu/tjpzoom/tjpzoom.js
hola gem@, ¿sabes cómo se hace ese efecto de ver la imagen ampliada pero fuera de la foto? (si es que existe, creo haberlo visto en algún lado, webs, sobre todo). es decir, yo pongo una imagen pequeña y luego aparece en grande a un lado... ¿?
:: ¿Te refieres a esto?
http://gemablog-.blogspot.com/2007/03/inseguridad-aqu-escribimos-el-principio.html
Cuel es el editor de entrada??? como asi..??? quiero ese efecto!!!!!!!! pero no esta bien explicado.. soy nuevo pero he entendido muchas cosas hasta en el PHp pero sto no lo entiendo.. he a~adido muchos Gadgets pero ahora esto??? ayuda x favor!! osea se q cuando hablan de andes del < / head > es la llave q cierra la cabezera pero "editor de entrada" ??? x favor alguien q m rsponda!
:: Danny he modificado la entrada pero no porque estuviera mal explicada sino porque el servidor donde está alojado el script no funcionaba.
A veces pensamos que entendemos lo más complicado pero no sirve de mucho si no prestamos atención a lo más elemental.
El editor de entradas es algo tan sencillo como el sitio donde escribimos las entradas (post)
Buenas todo bien, pero me estan pidiendo de que en vez que sea directamente a una imagen, al hacer clic aunmente y con un recuadro, esto lo tengo echo, pero no se como engranarlo, con este maravilloso codigo que publicaste, y necesito que en vez de que me salga un recuadro , salga un redondo, le pongo aqui un link de la pagina, para que veas lo que quiero, ojo ya tengo en funcionamiento el zoom que tu publicaste pero necesito que veas las miniaturas cuando se abren.
http://www.cross-home.com/proyectocrossh/detalle.php?pag=detalle&id=0023000030
:: Saludos AnnA, respondí a tu mail, siento no poder ayudarte porque la plantilla que usas no es de Blogger :S
Gracias si lei tu email, voy a ver como hago para adaptarlo a las necesidades del jefe :D
:: Suerte AnnA :)
Nota: solo los miembros de este blog pueden publicar comentarios.